<template>
	<view class="body">
	<!-- 自定义导航栏 -->
	<nav-bar/>
	
	<!-- 根据不同环境设置壁纸高度 -->
	<!-- #ifndef H5 -->
	<view class="content" :style="{'height': 'calc(100vh - ' + barHeight + 'px)'}">
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<view class="content" style="height:100vh;">
	<!-- #endif -->
		<!-- 
		<view class="dropDown">
			<u-dropdown>
				<u-dropdown-item v-model="language" title="语言" :options="[isEng,isCh]"></u-dropdown-item>
			</u-dropdown>
		</view> -->
		<u-switch  v-model="isEng" inactive-color="#fffeec" active-color="#a6d2e5" size="35" style="margin-left: 15rpx;"></u-switch>
		<image v-if="isEng" src="../../static/index/infoEng.png" class="infoEng" mode="aspectFill" @tap="info"></image>
		<image v-else src="../../static/index/info.png"  class="info" mode="aspectFill" @tap="info"></image>
		<image src="../../static/index/subUnit1.png" class="toastOne" mode="aspectFill" @tap="tapOne"></image>
		<image src="../../static/index/subUnit2.png" class="toastTwo" mode="aspectFill" @tap="tapSec"></image>
		<!-- 通过style控制css动画，由于js直接修改css或Dom在uni-app中不可用，所以没有采用 -->
		<image src="../../static/index/subUnit3.png" class="toastThr" mode="aspectFill" :style="{'transform':'translateX(' + translateX + 'rpx)'}" @tap="tapThr"></image>
		<image src="../../static/index/subUnit5.png" class="arrow"  mode="" :style="{'transform':'translateX(' + translateX * 1.12 + 'rpx) rotate('+ -translateX*5 +'deg)'}" ></image>
		<view :style="{'transform':'translateX(' + -translateX*7.2 + 'rpx)'}" class="userList">
			<image src="../../static/index/userList/user1.png" class="userImg" mode="" @tap="infoUserOne"></image>
			<image src="../../static/index/userList/user2.png" class="userImg" mode="" @tap="infoUserSec"></image>
			<image src="../../static/index/userList/user3.png" class="userImg" mode="" @tap="infoUserThr"></image>
			<image src="../../static/index/userList/user4.png" class="userImg" mode="" @tap="infoUserFou"></image>
			<image src="../../static/index/userList/subUnit1.png" style="width: 49.31rpx; height: 5rpx; margin: 11rpx 0 14rpx 0;" mode=""></image>
			<image src="../../static/index/userList/addUser.png" class="userImg" mode="" @tap="addUser"></image>
		</view>
		<image src="../../static/index/subUnit4.png" mode="" class="toastFou" @tap="tapFou"></image>
		<image src="../../static/index/subUnit6.png" mode="" class="toastFiv" @tap="tapFiv"></image>
		<!--信息框弹出-->
		<u-modal v-model="showOne" 
		:confirm-text="isEng? 'get it' : '好'"
		:title="isEng? 'this is module' : '这是组件1'" :content="isEng? 'this is content' : '这是内容'" 
		@confirm="showOne = false"></u-modal>
		<u-modal v-model="showSec" 
		:confirm-text="isEng? 'get it' : '好的'"
		:title="isEng? 'this is module' : '这是组件2'" :content="isEng? 'this is content' : '这是内容'" 
		@confirm="showSec = false"></u-modal>
		<u-modal v-model="showFou" 
		:confirm-text="isEng? 'get it' : '好的'"
		:title="isEng? 'this is module' : '这是组件4'" :content="isEng? 'this is content' : '这是内容'" 
		@confirm="showFou = false"></u-modal>
		<u-modal v-model="showFiv" 
		:confirm-text="isEng? 'get it' : '好的'"
		:title="isEng? 'this is module' : '这是组件5'" :content="isEng? 'this is content' : '这是内容'" 
		@confirm="showFiv = false"></u-modal>
		<u-modal v-model="userOne" :title="isEng? 'Member 1':'成员1'" content="这是小橘" 
		:show-cancel-button="true" 
		:confirm-text="isEng? 'info' : '详情'" :cancel-text="isEng? 'get it' : '知道了'" 
		@confirm="detailUserOne" @cancel="userOne = false">
		</u-modal>
		<u-modal v-model="userSec" :title="isEng? 'Member 2':'成员2'" content="这是小黄"
		:confirm-text="isEng? 'info' : '详情'" :cancel-text="isEng? 'get it' : '知道了'"
		:show-cancel-button="true" 
		@confirm="detailUserSec" @cancel="userOne = false">
		</u-modal>
		<u-modal v-model="userThr" :title="isEng? 'Member 3':'成员3'" content="这是小青"
		:show-cancel-button="true" 
		:confirm-text="isEng? 'info' : '详情'" :cancel-text="isEng? 'get it' : '知道了'" 
		@confirm="detailUserThr" @cancel="userOne = false">
		</u-modal>
		<u-modal v-model="userFou" :title="isEng? 'Member 4':'成员4'" content="这是小粉"
		:show-cancel-button="true"
		:confirm-text="isEng? 'info' : '详情'" :cancel-text="isEng? 'get it' : '知道了'"
		@confirm="detailUserFou" @cancel="userOne = false">
		</u-modal>
	</view>
	</view>
</template>

<script>
	import navBar from '../../components/navBar.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				isEng:false,
				// language: 2,
				// isEng: {
				// 	label: 'Eng',
				// 	value: 1
				// },
				// isCh: {
				// 	label: '汉语',
				// 	value: 2
				// },
				showOne:false,
				showSec:false,
				translateX:0,
				showThr:false,
				showFou:false,
				showFiv:false,
				userOne:false,
				userSec:false,
				userThr:false,
				userFou:false,
				barHeight:this.customBar,
			}
		},
		onLoad() {
		
		},
		methods: {
			info() {
				uni.redirectTo({
					url:'../train/index'
				})
			},
			tapOne() {this.showOne = true},
			tapSec() {this.showSec = true},
			tapThr() {this.translateX = this.translateX === 0 ? 20 : 0},
			tapFou() {this.showFou = true},
			tapFiv() {this.showFiv = true},
			infoUserOne() {this.userOne = true},
			infoUserSec() {this.userSec = true},
			infoUserThr() {this.userThr = true},
			infoUserFou() {this.userFou = true},
			detailUserOne() {uni.showToast({
				title:'进行操作查看信息'
			})},
			detailUserSec() {uni.showToast({
				title:'进行操作查看信息'
			})},
			detailUserThr() {uni.showToast({
				title:'进行操作查看信息'
			})},
			detailUserFou() {uni.showToast({
				title:'进行操作查看信息'
			})},
			addUser() {uni.showToast({
				title:'进行操作加入人员'
			})}
		},
		components:{
			'navBar':navBar
		}
	}
</script>

<style scoped>
	.content {
		position: relative;
		box-sizing: border-box;
		width: 100vw;
		/* 微信开发者工具不支持大图片背景*/
		/* background-image: url(../../static/index/bac.png); */
		background-image: url('');
		background-size:100vw calc(100vh + 10rpx);
		background-position:0 -10rpx;
		background-repeat:no-repeat;
		overflow: hidden;
	}
	.info {
		position: absolute;
		right: 67.56944444444444rpx;
		bottom: 147.916296875rpx;
		width:  266.67rpx;
		height: 130.55rpx;
	}
	.infoEng {
		position: absolute;
		right: 15rpx;
		bottom: 147.916296875rpx;
		width:  445.8333333333333rpx;
		height: 109.02750520833334rpx;
	}
	.toastOne {
		position: absolute;
		right:-215rpx;
		top: -240rpx;
		width:  600rpx;
		height:  600rpx;
	}
	.toastTwo {
		position: absolute;
		left: -33.333333333333336rpx;
		bottom: -45.83321875rpx;
		overflow: hidden;
		width:  256.5208333333333rpx;
		height:  233.32580557291666rpx;
	}
	.toastThr {
		width: 143.333rpx;
		height: 83.333rpx;
		position: absolute;
		top: 797.914671875rpx;
		right: -100rpx;
		transition: .5s;
		z-index: 2;
	}
	.arrow {
		width: 18.375rpx;
		height: 18.18745453125rpx;
		transform: rotate(0deg);
		position: absolute;
		top: 880.914671875rpx;
		right: 30rpx;
		transition: .5s;
	}
	.toastFou {
		position: absolute;
		left: 72.98611111111111rpx;
		bottom: 294.4437083333333rpx;
		width:  75.70833333333333rpx;
		height:  72.50676317708333rpx;
	}
	.toastFiv {
		position: absolute;
		left: 238.19444444444446rpx;
		bottom: 226.38832291666665rpx;
		width: 330.94444444444446rpx;
		height: 598.7623919791666rpx;
	}
	.userList {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-image: url(../../static/index/userList/bac.png);
		background-size: 75rpx 386.80458854166665rpx;
		width: 75rpx;
		height: 386.80458854166665rpx;
		position: relative;
		top: 537.914671875rpx;
		right: calc(-100vw + 60rpx);
		transition: .5s;
	}
	.userImg {
		width: 54.16653125rpx;
		height: 54.16653125rpx;
		margin: 6.944rpx 0;
	}
	.wrap {
		position: absolute;
		left: 100px;
		top: 100px;
		padding: 30rpx;
	}	
	.badge-button {
		padding: 4rpx 6rpx;
		background-color: $u-type-error;
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 1;
	}
/* 	.dropDown {
		width: 100px;
		height: 100px;
	} */
</style>
